<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px;">
      <el-select v-model="time" placeholder="请选择" @change="saleAmount">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="6">
        <div class="flex-item">
          <span>耳U枕销售总金额（不含优惠券兑换）（元）</span>
          <span>{{showData.sumAmountWithout || 0}}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-item">
          <span>耳U枕销售总数量（含优惠券兑换）</span>
          <span>{{showData.sumNumber || 0}}</span>
        </div>
      </el-col>
      <el-col :span="6">
          <div class="flex-item">
            <span>耳U枕销售总数量（不含优惠券兑换）</span>
            <span>{{showData.sumNumberWithout || 0}}</span>
          </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-item">
          <span>优惠券销售总额（元）</span>
          <span>{{showData.sumAmountCoupon || 0}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="6">
        <div class="flex-item">
          <span>购买优惠券次数</span>
          <span>{{showData.sumNumberPayCoupon || 0}}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-item">
          <span>优惠券兑换次数</span>
          <span>{{showData.couponUsedCount || 0}}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-item">
          <span>销售总金额（元）</span>
          <span>{{showData.sumAmount || 0}}</span>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="goodsName"
        label="热卖商品"
        min-width="200"
      />
      <el-table-column
        prop="countNumber"
        label="成交数量"
        min-width="200"
      />
      <el-table-column
        prop="amount"
        label="成交额"
        min-width="120"
      />
      <el-table-column
        prop="marchineId"
        label="货柜ID"
        min-width="120"
      />
      <el-table-column
        prop="marchineLocation"
        label="货柜位置"
        min-width="120"
      />
      <el-table-column
        prop="firstStage"
        label="00:00-6:00售出量"
        min-width="120"
      />
      <el-table-column
        prop="secondStage"
        label="6:00-12:00售出量"
        min-width="120"
      />
      <el-table-column
        prop="thirdStage"
        label="12:00-18:00售出量"
        min-width="120"
      />
      <el-table-column
        prop="forthStage"
        label="18:00-00:00售出量"
        min-width="120"
      />
    </el-table>
    <div class="u-flex u-row-center u-m-t-10">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import {
  orderStatistics,
  saleAmount
} from "@/api/user";
export default {
  data() {
    return {
      list: [],
      loading: false,
      // currentPage: 1,
      queryData: {
        status: "", //	商品状态 0 下架 1 上架
        name: "",
      },
      pagination: {
        pageSize: 1,
        total: 1,
      },
      time: 1,
      showData: {},
      options: [
        {
          label: '近一周',
          value: 1
        },
        {
          label: '近一个月',
          value: 2
        },
        {
          label: '近三个月',
          value: 3
        },
        {
          label: '近六个月',
          value: 4
        },
        {
          label: '近一年',
          value: 5
        }
      ]
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.queryData.pageIndex + 1;
      },
      set() {},
    },
  },
  created () {
    this.getList();
    this.saleAmount();
  },
  methods: {
    saleAmount () {
      saleAmount({duration: this.time}).then((res) => {
        this.showData = res.data;
      });
    },
    getList() {
      this.loading = true;
      orderStatistics({}).then((res) => {
        this.list = res.data;
        this.loading = false;
      });
    },
    hanleSearch(reset) {
      if (reset) {
        this.queryData.name = "";
        this.queryData.status = "";
      }
      this.getList();
    },
    handleSizeChange(val) {
      // this.queryData.pageIndex = val - 1
      // this.getList()
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val - 1;
      this.getList();
    },
    handleEdit(id) {
      this.$router.push(`/permission/page/editProduct?goodsId=${id}`);
    },
    handleDelete(goodsId) {
      this.$confirm("确认要删除该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.confirmDelete(goodsId);
        })
        .catch((err) => {
          console.log("err", err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    confirmDelete(goodsId) {
      deleteGoods(goodsId).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.getList();
      });
    },
    formatter: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter1: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter2: function (row) {
      return this.$moment(row.createdTime).format("YYYY/MM/DD");
    },
    addCoupon() {
      this.$router.push("/coupon/addCoupon");
    },
    changeStatus(row) {
      let params = {
        couponId: row.couponId,
        status: 1,
      };
      if (row.status + "" === "1") {
        params.status = 0;
      }
      couponStatusUpdate(params).then(() => {
        this.getList();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.success {
  color: #67c23a;
}
.Warning {
  color: #e6a23c;
}
.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  span {
    &:first-of-type {
      margin-bottom: 10px;
      font-weight: bold;
      text-align: center;
    }
  }
}
</style>
